<template>
  <el-dialog :visible.sync="dialogModel" :title="$t('business.batchAssign')" @close="close" :close-on-press-escape="true" custom-class="customer-search-dialog" size="small">
    <p class="tip">{{$t('business.assignTip')}}</p>
    <p class="alResult" v-if="restCount >= 0" v-html="$t('business.assignNormal', { count, assignedCount, restCount })">
    </p>
    <p class="alResult" v-if="restCount < 0" v-html="$t('business.assignOver', { count, assignedCount, restCount: -restCount })">
    </p>
    <div class="label">
      {{$t('public.pickAgent')}}
    </div>
    <div>
      <el-select v-model="selectAgent"
                 :filterable="true"
                 :multiple="true"
                 @change="change"
                 size="mini"
                 collapse-tags
                 :placeholder="$t('public.pickAgentTip1')">
        <el-option
          v-for="item in agents"
          :label="`${item.displayName}[${item.exten}]`"
          :value="item._id"
          :key="item._id"
        >
        </el-option>
      </el-select>
      <div class="fr">
        <el-button type="text" class="primary_btn text_btn" @click.stop="autoAssign">{{$t('public.autoAssign')}}</el-button>
        <el-button type="text" class="primary_btn text_btn" @click.stop="reset">
          {{$t('public.reset')}}
        </el-button>
      </div>
    </div>
    <div class="agent-count scResult">
      <span class="count" v-if="selectAgent.length===0">{{$t('public.noAgent')}}</span>
      <p class="select-tip" v-if="selectAgent.length!==0">{{$t('public.hasPickAgentWithCount', { count: selectAgent.length })}}
        <el-button type="text" class="primary_btn text_btn fr" @click.stop="clear">
          {{$t('public.clear')}}
        </el-button>
      </p>
      <div class="agent-count">
        <div v-for="(item, index) in selectAgent" class="fl result">
          <span class="agent-name">{{item | agentName(agents)}}</span>
          <el-input size="mini" class="an-count" v-model.trim="form.agentCount[item]" type="number" min="0">
          </el-input>
          <!--<el-input-number size="mini" v-model="form.agentCount[item]" controls-position="right"></el-input-number>-->
          <i class="iconfont icon-guanbi" @click= "dele(index)"></i>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button @click.stop="close" class="primary_btn">
        {{$t('public.cancel')}}
      </el-button>
      <el-button type="primary" @click.stop="save" class="primary_btn">
        {{$t('public.save')}}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { deepClone, removeEmptyProperty } from '@/utils/m7Utils'
  export default {
    name: 'BatchAssign',
    data () {
      return {
        dialogModel: false,
        count: 0,
        agents: [],
        selectAgent: [],
        form: {
          condition: {},
          ids: [],
          agentCount: {}
        }
      }
    },
    props: {
    },
    filters: {
      agentName (value, agents) {
        let name = ''
        agents.some((item) => {
          if (item._id === value) {
            name = item.displayName
          }
        })
        return name
      }
    },
    computed: {
      assignedCount () {
        let count = 0
        for (let key in this.form.agentCount) {
          count += parseInt(this.form.agentCount[key])
        }
        return count
      },
      restCount () {
        return this.count - this.assignedCount
      }
    },
    methods: {
      open ({count, condition, agents, ids}) {
        this.dialogModel = true
        this.$nextTick(() => {
          this.count = count
          this.agents = agents
          this.form.condition = condition
          this.form.ids = ids
          this.form.agentCount = {}
          this.selectAgent = []
        })
      },
      change (value) {
        for (let i in this.form.agentCount) {
          if (value.indexOf(i) === -1) {
            this.$delete(this.form.agentCount, i)
          }
        }
        value.forEach((item) => {
          if (!(item in this.form.agentCount)) {
            this.$set(this.form.agentCount, item, 0)
          }
        })
      },
      save () {
        if (this.assignedCount === 0) {
          return
        }
        if (this.restCount < 0) {
          this.$message.error(this.$t('business.assignSaveOver', {count: this.count}))
          return
        }
        let data = deepClone(this.form)
        if (!data.ids.length) {
          // 选择的是符合条件的全部工单,去掉没用条件
          delete data.ids
          delete data.condition.queryCount
          delete data.condition.page
          delete data.condition.morePage
          removeEmptyProperty(data.condition)
        } else {
          delete data.condition
        }
        for (let i in data.agentCount) {
          data.agentCount[i] = parseInt(data.agentCount[i])
        }
        data.total = this.count
        this.$store.dispatch('batchAssign', data).then((res) => {
          if (res && res.success) {
            this.close()
            let message = res.failCount ? 'business.operateSucOther' : 'call.assignSuccess'
            this.$message.success(this.$t(message))
            this.$emit('batchAssignSuc', res)
          } else {
          }
        })
      },
      // 自动分配
      autoAssign () {
        let num = Math.floor(this.count / this.selectAgent.length)
        for (let key in this.form.agentCount) {
          this.form.agentCount[key] = num
        }
        let restCount = this.count - num * this.selectAgent.length
        this.selectAgent.some((item) => {
          if (restCount === 0) {
            return true
          }
          this.form.agentCount[item]++
          restCount--
        })
      },
      // 点击重置时触发
      reset () {
        for (let key in this.form.agentCount) {
          this.form.agentCount[key] = 0
        }
      },
      // 清除
      clear () {
        this.selectAgent = []
        this.form.agentCount = {}
      },
      // 删除
      dele (index) {
        let _id = this.selectAgent[index]
        this.$delete(this.form.agentCount, _id)
        this.selectAgent.splice(index, 1)
      },
      close () {
        this.dialogModel = false
      }
    },
    components: {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .tip
    height 36px
    line-height 36px
    padding-left 16px
    color $cf-gray4
    background $c-back
  .alResult
    margin 10px 0
    color $cf-gray0
    .assignedCount
      color #2ab34b
    .restCount
      color #ec5973
  .text_btn
    min-width 0
  .footer
    text-align right
  .select
    padding 10px 0
    border-bottom 1px solid $c-border1
  .scResult
    border-top 1px solid $c-border1
    padding 16px 0
    margin-top 10px
    .count
      color $cf-gray4
    .select-tip
      line-height 30px
      color $cf-gray1
    .agent-count
      height 210px
      font-size 12px
      margin-top 1em
      overflow-y auto
    .result
      display flex
      align-items center
      margin-bottom 1em
      margin-right 15px
      .agent-name
        display inline-block
        color $cf-gray1
        padding-right 7px
      .el-input
        width 60px
        height 24px
      .icon-guanbi
        font-size 12px
        color $cf-gray5
        margin-left 10px
        cursor pointer
    .clea
      cursor pointer
      color $c-main
</style>
